<template>
  <div class="relative">
    <transition name="top" mode="out-in">
      <div v-if="isShow" class="one">123</div>
      <div v-else-if="!isShow" class="two">111</div>
    </transition>
    <el-button @click="isShow=!isShow">切换</el-button>
  </div>
</template>

<script name="transitionTwo" setup>
import {ref} from 'vue'

let isShow = ref(false)
</script>
<style lang="scss" scoped>
// 淡入淡出
// 定义进入前与离开后状态
.name-enter, .name-leave-to {
  opacity: 0
}

// 定义离开前与进入后状态
.name-leave, .name-enter-to {
  opacity: 1
}

// 定义进出过程
.name-enter-active, .name-leave-active {
  transition: all .4s
}


//  缩放进出
.scale-enter, .scale-leave-to {
  transform: scale(0)
}
.scale-leave, .scale-enter-to {
  transform: scale(1)
}
.scale-enter-active, .scale-leave-active {
  transition: all .2s
}

// left 左侧进出 (通常用于左侧边栏)
.left-enter, .left-leave-to {
  transform: translate3d(-100%, 0, 0)
}
.left-leave, .left-enter-to {
  transform: translate3d(0, 0, 0)
}
.left-enter-active, .left-leave-active {
  transition: all .2s
}


.top-enter, .top-leave-to {
  transform: translate3d(0, -100%, 0)
}
.top-leave, .top-enter-to {
  transform: translate3d(0, 0, 0)
}
.top-enter-active, .top-leave-active {
  transition: all .2s
}

.one {
  height: 100px;
  background-color: aquamarine;
}
.two {
  height: 100px;
  background-color: #f3ff0b;
}
</style>
